<template>
  <keep-alive>
  <component :is="tabTo"></component>
  </keep-alive>
  <button @click="changeCompo">切换组件</button>
  <ponent-exchange/>
<!--  <ponent-test/>-->
</template>

<script>

import Headers from "@/pages/Headers.vue";
import Main from "@/pages/Main.vue";
import Aside from "@/pages/Aside.vue";
import Parent from "@/props_extends/Parent.vue";
import Model from "@/components/EventWithModel/Model.vue";
import MainofModel from "@/components/EventWithModel/MainofModel.vue";
import Attribute from "@/components/attribute/Attribute.vue";
import SlotBase from "@/components/insert/SlotBase.vue";
import SlotBaseExtends from "@/components/insert/SlotBaseExtends.vue";
import VueLife from "@/life/VueLife.vue";
import PonentExchange from "@/components/compo/ponentExchange.vue";
import {defineAsyncComponent} from "vue";

const ponentTest=defineAsyncComponent(()=>{
  import ("@/components/compo/ponentTest.vue")
})
export default {
  components: {
    PonentTest,
    PonentExchange,
    VueLife,
    SlotBaseExtends,
    SlotBase,
    Attribute,
    MainofModel,
    Model,
    Parent,
    Aside,
    Main,
    Headers
  },
  data(){
    return{
      msg:"渲染作用域",
      tabTo:"ponentExchange"
    }
  },
  methods:{
    changeCompo(){
      this.tabTo=this.tabTo==="PonentTest"?"PonentExchange":"ponentTest"
    }
  },
  computed:{

  }
}
</script>
